<template>
    <div class="info">
        <div class="personalTop">
            <div class="title">个人资料</div>
            <div class="tips">完善您的个人信息</div>
        </div>
        <el-divider></el-divider>
        <div class="cont">
            <div class="upTx">
                <el-upload
                        class="avatar-uploader"
                        :show-file-list="false"
                        :http-request="upload"
                >
                    <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                    <el-icon class="avatar-uploader-icon">
                        <plus/>
                    </el-icon>
                </el-upload>
                <div class="backImg">
                    <img
                            :src="imageUrl"
                            alt=""
                    />
                    <div class="upImg">
                        <i class="iconfont icon-yunshangchuan2"></i>
                        <span>更换头像</span>
                    </div>
                </div>
            </div>

            <el-form
                    ref="form"
                    :model="userInfo"
                    class="formWaip"
                    label-position="top"
            >
                <el-form-item label="用户名：">
                    <el-input
                            v-model="userInfo.userName"
                            placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input
                            v-model="userInfo.phone"
                            placeholder="请输入手机号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="作者介绍：">
                    <el-input
                            v-model="userInfo.description"
                            placeholder="请输入作者介绍"
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 6 }"
                            resize="none"
                    ></el-input>
                </el-form-item>
            </el-form>

            <div style="text-align: center">
                <el-button plain type="primary" @click="submitForm"
                >提交保存
                </el-button
                >
            </div>
        </div>
    </div>
</template>
<script>
    import {UserEdit, UserInfoDetail, UpLoadImg} from "@/api/UserInfo";
    import {getUserInfo, setUserInfo} from "@/utils/auth";
    import axios from 'axios'
    import baseConfig from "@/utils/config"

    export default {
        data() {
            return {
                form: {},
                userInfo: {},
                imageUrl: ''
            };
        },
        created() {
            this.userInfo = JSON.parse(getUserInfo());
            this.imageUrl = baseConfig.dev + '' + this.userInfo.userAvatar;
        },
        methods: {
            upload(params) {
                let file = params.file;
                // 根据后台需求数据格式
                let form = new FormData();
                // 文件对象
                form.append("files", file);
                // 本例子主要要在请求时添加特定属性，所以要用自己方法覆盖默认的action
                // form.append("clientType", 'xxx');
                // 项目封装的请求方法，下面做简单介绍
                // axios({
                //   url: baseConfig.dev+"Picture/UpLoadImg",//正式
                //   // url: "/manager/FileUpLoad",
                //   method: "post",
                //   data: form,
                //   headers: { "content-type": "application/x-www-form-urlencoded" },
                //   withCredentials: true,
                // }).then((res) => {
                //   if(res.code==0){
                //     this.userInfo.userAvatar=res.data.data[0];
                //   this.imageUrl=baseConfig.dev+''+res.data.data[0];
                //   }else{
                //     this.$message.error(res.data)
                //   }
                // });
                UpLoadImg(params).then((res) => {
                    if (res.code == 0) {
                        this.userInfo.userAvatar = res.data[0];
                        this.imageUrl = baseConfig.dev + '' + res.data[0];
                    } else {
                        this.$message.error(res.data)
                    }
                })
            },
            submitForm() {
                UserEdit(this.userInfo).then((res) => {
                    if (res.code == 0) {
                        this.$message.success("修改成功");
                        UserInfoDetail().then((res1) => {
                            setUserInfo(res1.data);
                            this.$store.commit('setUser', res1.data)
                        })
                    } else {
                        this.$message.error(res.data);
                    }
                });
            },
        },
    };
</script>
<style lang="scss" scoped>
    .info {
        .cont {
            width: 520px;
            margin: 0 auto;
            padding-bottom: 40px;

            ::v-deep {
                .el-form-item {
                    margin-bottom: 10px;
                }

                .el-form-item__label {
                    padding: 0;
                }
            }
        }

        .upTx {
            position: relative;
            width: 93px;
            height: 93px;
            margin: 0 auto;

            ::v-deep {
                .avatar-uploader {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 11;

                    .el-upload {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .backImg {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                overflow: hidden;
                border-radius: 50%;

                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;
                }

                .upImg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 10;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    background: rgba($color: #000000, $alpha: 0.5);

                    span {
                        font-size: 12px;
                    }

                    i {
                        font-size: 30px;
                    }
                }
            }
        }
    }
</style>
